<template>
  <div class="recommend-content">
    <van-nav-bar left-arrow @click-left="goBack"/>
    <div class="title">Favorite</div>
    <UnLogin v-if="!hasLogin"></UnLogin>
    <div class="recommend-list flex flex-wrap" v-else>
      <div class="recommend-col" v-for="(item, index) in favoriteList" :key="item.id">
        <div class="recommend-item" @click="handleDetail(item)">
          <div class="recommend-item-info">
            <div class="jingxuan">
              <img class="recommend-item-img" :src="item.showImg" alt="" />
               <span class="recommend-tag" v-if="item.tag === '1' || item.tag === '3'">{{ $t("component.favoriteList.1") }}</span>
            </div>
            <div class="recommend-item-title mv5">
                {{ JSON.parse(item.commodityCopy).name }}
              </div>
<!--            <div class="recommend-item-time">-->
<!--              <span>{{ JSON.parse(item.commodityCopy).areaName }}</span>-->
<!--            </div>-->
<!--            <div class="recommend-item-time">-->
<!--              <span>{{ JSON.parse(item.commodityCopy).createTime }}</span>-->
<!--            </div>-->
            <div class="flex flex-justify-content-between flex-align-items-center">
              <span class="recommend-item-price">{{ item.price | num2Money }} KZ</span>
            </div>
            <div class="flex flex-justify-content-between flex-align-items-center mb15" style="padding: 0 16px;">
<!--              <div class="recommend-item-userinfo flex flex-align-items-center">-->
<!--                <img :src="domain + item.portrait" alt="" />-->
<!--                <span>{{ item.createName }}</span>-->
<!--              </div>-->
              <div class="recommend-item-time">
                <span>{{ format(JSON.parse(item.commodityCopy).createTime) }}</span>
              </div>
              <span class="recommend-item-unfavorite"><i class="fa fa-heart" style="color: #fb8c24; cursor: pointer;" @click.stop="handleCancel(item, index)"></i></span>
              <!-- <span class="recommend-item-favorited"><i class="fa fa-heart"></i></span> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Api from "@/api";
import { Domain } from "@/constants";
import { isLogin } from "@/utils";
import UnLogin from "@/components/unlogin";
export default {
  name: "Favorite",
  components: { UnLogin },
  data() {
    return {
      domain: Domain,
      favoriteParams: {
        pageSize: 20,
        pageNo: 1,
      },
      favoriteList: [],
      hasLogin: false,
    };
  },
  created() {
    this.hasLogin = isLogin();
    isLogin() && this.loadFavorites();
  },
  methods: {
    // 收藏列表
    loadFavorites() {
      Api.myFavoritesList(this.favoriteParams).then((res) => {
        const { rows = [] } = res;
        this.favoriteList = rows.map((item) => {
          const img = item.imgList ? JSON.parse(item.imgList)[0] : "";
          return Object.assign(item, { showImg: Domain + img });
        });
      });
    },
    handleCancel(item, index) {
      const params = {
        commodityId: item.commodityId,
      };
      Api.addFavorites(params).then(() => {
        this.favoriteList.splice(index, 1);
      });
    },
    handleDetail(item) {
      this.$router.push({
        path: "/detail",
        query: {
          id: item.commodityId,
        },
      });
    },
    // 转换时间格式
    format(time){
      var date = new Date(time);
      var year=date.getFullYear();
      var month=date.getMonth()+1;
      var date1=date.getDate();
      return year+"-"+month+"-"+date1;
    },
    goBack(){
      this.$router.go(-1)
    },
  },
};
</script>
<style lang="less" scoped>
::v-deep.van-nav-bar{
  background-color: #fff;
  padding: 0 10px;
  .van-nav-bar__left{
    padding: 0;
    .van-icon{
      font-size: 26px;
      color: #000000;
    }
  }
}
.title {
  font-size: 20px;
  line-height: 50px;
  padding-left: 16px;
  font-weight: bold;
  background: #fff;
}
.recommend-list {
  padding: 16px;
  box-sizing: border-box;
  width: 100%;
}
.recommend-col {
  //width: calc((100% - 10px) / 2);
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 15px;
  overflow: hidden;

  &:nth-child(2n) {
    margin-right: 0;
  }
  .recommend-item-info {
    .jingxuan {
      position: relative;
      width: 100%;
      border-radius: 4px;
      height: 180px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .recommend-tag {
        color: #fff;
        font-size: 12px;
        background: linear-gradient(235deg, #ff7144 0%, #f63e2d 100%);
        display: inline-block;
        padding: 5px 10px;
        border-radius: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
    .recommend-item-title {
      padding: 0 16px;
      color: #595959;
      font-size: 14px;
      max-height: 34px;
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      .recommend-tag {
        color: #fff;
        font-size: 12px;
        background: linear-gradient(235deg, #ff7144 0%, #f63e2d 100%);
        display: inline-block;
        padding: 5px 10px;
        border-radius: 4px;
      }
    }
    .recommend-item-favorited {
      color: #fb5724;
    }
    .recommend-item-userinfo {
      font-size: 12px;
      color: #999999;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      img {
        width: 24px;
        height: 24px;
        border-radius: 100%;
        display: inline-block;
        background-color: #f2f2f2;
        margin-right: 5px;
      }
    }
    .recommend-item-time {
      color: #999;
      font-size: 14px;
      margin: 10px 0;
      letter-spacing: 1px;
    }
    .recommend-item-price {
      padding: 0 16px;
      font-size: 16px;
      color: #fb8c24;
      font-family: Arial Black;
      margin-bottom: 10px;
    }
  }
  .recommend-item-btns {
    display: flex;
    height: 45px;
    box-sizing: border-box;
    border-top: 1px solid #e8e8e8;
    .recommend-item-btn {
      flex: 1;
      width: 50%;
      box-sizing: border-box;
      height: 44px;
      line-height: 44px;
      color: #999999;
      text-align: center;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
      &:hover {
        color: #fb8c24;
      }
      &:not(:last-child) {
        border-right: 1px solid #e8e8e8;
      }
    }
  }
}
</style>
